<template>
  <div class="map-data">
    <main class="main">
      <div class="map-data-top">
        <el-row class="clearfix" :gutter="30">
          <el-col :sm="24" :md="6" :lg="6">
            <item-title title="本月订单数分布"></item-title>
            <div class="chart-box chart-box-border">
              <angle-arrow></angle-arrow>
              <ranking-list :list="mapMonthData"></ranking-list>
            </div>
          </el-col>
          <el-col :sm="24" :md="12" :lg="12">
            <div class="map-tabs">
              <a
                href="javascript:void(0);"
                @click="onSetTab(0)"
                :class="{ activate: status == 0 }"
                >本月订单数分布</a
              >
              <a
                href="javascript:void(0);"
                @click="onSetTab(1)"
                :class="{ activate: status == 1 }"
                >全国合作商分布</a
              >
            </div>
            <main class="main">
              <div class="main-left">
                <div
                  class="item"
                  v-for="(item, index) in mapLeftData"
                  :key="index"
                >
                  <p class="item-title">{{ item.title }}</p>
                  <p class="item-count">
                    {{ item.count }}<em>{{ item.countUnit }}</em>
                  </p>
                  <p class="item-down">{{ item.downContent }}</p>
                </div>
              </div>
              <div class="map">
                <china-map :coordMapData='geoCoordMap' :hoverData="hoverData" :mapData="mapData"></china-map>
              </div>
              <div class="main-right">
                <div
                  class="item"
                  v-for="(item, index) in mapRightData"
                  :key="index"
                >
                  <p class="item-title">{{ item.title }}</p>
                  <p class="item-count">
                    {{ item.count }}<em>{{ item.countUnit }}</em>
                  </p>
                  <p class="item-down">{{ item.downContent }}</p>
                </div>
              </div>
            </main>
          </el-col>
          <el-col :sm="24" :md="6" :lg="6">
            <item-title title="全国合作商分布"></item-title>
            <div class="chart-box chart-box-border">
              <angle-arrow></angle-arrow>
              <ranking-list :list="mapNationwideData"></ranking-list>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="map-data-bottom">
        <el-row class="clearfix" :gutter="30">
          <el-col :sm="24" :md="6" :lg="6">
            <div class="chart-box chart-box-border">
              <item-title title="本月订单"><a href="javascript:void(0);" style="color: #FFF;" @click="lookAllOrder">查看更多</a></item-title>
              <table-data :list="orderList" :step="0.5">
                <tr slot="table-head">
                  <td
                    :width="orderWidthList[index]"
                    v-for="(item, index) in orderHeadList"
                    :key="index"
                  >
                    <span>{{ item.text }}</span>
                  </td>
                </tr>
                <div class="table-list" slot="table-list">
                  <div
                    class="table-rwo"
                    v-for="(item,index) in orderList"
                    :key="index"
                  >
                    <div :style="{ width: orderWidthList[0] }">
                      <span>{{ item.store_name }}</span>
                    </div>
                    <div :style="{ width: orderWidthList[1] }">
                      <span>{{ item.province }}</span>
                    </div>
                    <div :style="{ width: orderWidthList[2] }">
                      <span>{{ item.self_price }}</span>
                    </div>
                    <div :style="{ width: orderWidthList[3] }">
                      <span>{{ item.add_time }}</span>
                    </div>
                  </div>
                </div>
              </table-data>
            </div>
          </el-col>
          <el-col :sm="24" :md="6" :lg="6">
            <div class="chart-box chart-box-border">
              <item-title title="实时浏览记录"><a href="javascript:void(0);" style="color: #FFF;" @click="lookAllBrowse">查看更多</a></item-title>
              <table-data :list="browseList" :step="0.5">
                <tr slot="table-head">
                  <td
                    :width="browseWidthList[index]"
                    v-for="(item, index) in browseHeadList"
                    :key="index"
                  >
                    <span>{{ item.text }}</span>
                  </td>
                </tr>
                <div class="table-list" slot="table-list">
                  <div
                    class="table-rwo"
                    v-for="(item,index) in browseList"
                    :key="index"
                  >
                    <div :style="{ width: browseWidthList[0] }">
                      <span>{{ item.nickname }}</span>
                    </div>
                    <div :style="{ width: browseWidthList[1] }">
                      <span>{{ item.store_name }}</span>
                    </div>
                    <div :style="{ width: browseWidthList[2] }">
                      <span>{{ item.province }}</span>
                    </div>
                    <div :style="{ width: browseWidthList[3] }">
                      <span>{{ item.where }}</span>
                    </div>
                    <div :style="{ width: browseWidthList[4] }">
                      <span>{{ item.add_time }}</span>
                    </div>
                  </div>
                </div>
              </table-data>
            </div>
          </el-col>
          <el-col :sm="24" :md="12" :lg="12">
            <div class="chart-box chart-box-border">
              <angle-arrow></angle-arrow>
              <item-title title="在线人数"></item-title>
              <line-chart
                :title="onLineData.title"
                :series="onLineData.series"
                :splitNumber="10"
              ></line-chart>
            </div>
          </el-col>
        </el-row>
      </div>
    </main>
  </div>
</template>

<script>
import itemTitle from "@/statistics/components/data-tit.vue";
import angleArrow from "@/statistics/components/angle-arrow.vue";
import tableData from "@/statistics/components/map/table-data.vue";
import rankingList from "@/statistics/components/map/ranking-list.vue";
import chinaMap from "@/statistics/components/map/china-map.vue";
import lineChart from "@/statistics/components/line-chart.vue";
import { Loading } from 'element-ui';
import orderTable from './order-table.vue'
import recordTable from './record-table.vue'
export default {
  data() {
    return {
      orderList: [],//本月订单
      orderWidthList: ["25%", "20%", "25%", "30%"],//本月订单宽度
      orderHeadList: [
        {
          id: 0,
          text: "商家",
        },
        {
          id: 1,
          text: "地区",
        },
        {
          id: 2,
          text: "金额",
        },
        {
          id: 3,
          text: "时间",
        },
      ],//本月订单头部
      browseHeadList: [
        {
          id: 0,
          text: "用户",
        },
        {
          id: 1,
          text: "商家",
        },
        {
          id: 2,
          text: "地区",
        },
        {
          id: 3,
          text: "足迹",
        },
        {
          id: 4,
          text: "时间",
        },
      ],//实时浏览记录头部
      browseWidthList: ["20%", "20%", "15%", "20%", "25%"],//实时浏览记录宽度
      browseList: [],//实时浏览记录
      status: 1,
      mapLeftData: [
        {
          title: "今日新增订单",
          count: 0,
          countUnit: "元",
          downContent: "本月0元", //进行文字拼接
        },
        {
          title: "今日PV",
          count: 0,
          countUnit: "次",
          downContent: `昨日0次`, //进行文字拼接
        },
        {
          title: "今日UV",
          count: 0,
          countUnit: "个",
          downContent: `昨日0个`, //进行文字拼接
        },
        {
          title: "今日新增用户",
          count: 0,
          countUnit: "个",
          downContent: "总数0个", //进行文字拼接
        },
      ], //地图左侧
      mapRightData: [
        {
          title: "合作商总数",
          count: 0,
          countUnit: "个",
          downContent: "本月0个", //进行文字拼接
        },
        {
          title: "今日活跃合作商数",
          count: 0,
          countUnit: "个",
          downContent: "本月0个", //进行文字拼接
        },
        {
          title: "今日下单合作商数",
          count: 0,
          countUnit: "个",
          downContent: "本月0个", //进行文字拼接
        },
        {
          title: "本月商家复购数",
          count: 0,
          countUnit: "%",
          downContent: "本月0%", //进行文字拼接
        },
      ],
      // 在线人数
      onLineData: {
        title: ["今日在线人数", "昨日在线人数"],
        series: [],
      },
      mapMonthData:[],//本月订单数分布
      mapNationwideData:[],//全国合作商分布
      geoCoordMap:{},//地图点
      hoverData:[],//地图点数据
      mapData:[],//控制地图颜色
      layerIndex:null,
      layerIndex2:null
    };
  },
  components: {
    itemTitle,
    angleArrow,
    tableData,
    rankingList,
    lineChart,
    chinaMap,
  },
  methods: {
    // 切换
    onSetTab(type) {
      if(this.status == type){
        return false
      }
      this.status = type;
      if(type ==0){
         this.$http(this.$ApiList.MapOrderData).then(res=>{
          const {order_map} = res.datas
          this.mapMonthData = order_map;
          this.initMapData(order_map)
        })
      }else{
        this.$http(this.$ApiList.MapStoreData).then(res=>{
          const {map} = res.datas
          this.mapNationwideData = map;
          this.initMapData(map)
        })
      }
    },
    // 获取数据
    getMapDataTop() {
      let loadingInstance = Loading.service({
					background: 'rgba(255,255,255,.1)',
					text: '加载中'
        });
      this.$http(this.$ApiList.MapDataTop, {
        type:1,
        map_type: 1,
        page: 0,
        limit: 30,
      }).then((res) => {
        loadingInstance.close()
        const { online_today, online_yesterday, top, browse_table,month_order_table,map,order_map } = res.datas;
        // 地图侧边数据
        this.setSideData(top)
        // 实时浏览记录
        this.orderList = month_order_table
        this.browseList = browse_table
        // 地图数据
        // map.shift();
        this.mapNationwideData = map;
        this.mapMonthData = order_map;
        this.initMapData(map)
        if(this.onLineData.series.length){
          return false;
        }
        // 在线人数
        let todayObj = {
          name: "今日在线人数",
          data: [],
          type: "line",
          symbol: 'none',
          itemStyle: {
            color: "#f9764c"
          },
          lineStyle:{
            width:5,
            shadowColor: 'rgba(249, 118, 76, 1)',
            shadowBlur: 25,
            shadowOffsetX:0,
            shadowOffsetY:1
          },
          smooth: true,
        };
        let yestodayObj = {
          name: "昨日在线人数",
          data: [],
          type: "line",
          symbol: 'none',
          itemStyle: {
            color: "#00fbfc"
          },
          lineStyle:{
            width:5,
            shadowColor: 'rgba(0, 251, 252, 1)',
            shadowBlur: 25,
            shadowOffsetX:0,
            shadowOffsetY:1
          },
          smooth: true
        };
        online_today.forEach((item) => {
          todayObj.data.push(item.num);
        });
        online_yesterday.forEach((item) => {
          yestodayObj.data.push(item.num);
        });
        this.onLineData.series.push(todayObj, yestodayObj);
      });
    },
    // 地图侧边数据
    setSideData(data){
      const {addUserNum,
             addUserNum_all, 
             online_store_num_month, 
             online_store_num_today, 
             order_sum_month, 
             order_sum_today, 
             pay_store_num_month, 
             pay_store_num_today, 
             pv, 
             pv_yesterday, 
             return_store_num, 
             return_store_num_rate, 
             store_num_all, 
             store_num_month, 
             uv, 
             uv_yesterday} = data;
      this.mapLeftData[0].count = order_sum_today;
      this.mapLeftData[0].downContent = `本月${order_sum_month}元`;
      this.mapLeftData[1].count = pv;
      this.mapLeftData[1].downContent = `昨日${pv_yesterday}次`
      this.mapLeftData[2].count = uv;
      this.mapLeftData[2].downContent = `昨日${uv_yesterday}个`
      this.mapLeftData[3].count = addUserNum;
      this.mapLeftData[3].downContent = `总数${addUserNum_all}个`
      this.mapRightData[0].count = store_num_all;
      this.mapRightData[0].downContent = `本月${store_num_month}个`;
      this.mapRightData[1].count = online_store_num_today;
      this.mapRightData[1].downContent = `本月${online_store_num_month}个`
      this.mapRightData[2].count = pay_store_num_today;
      this.mapRightData[2].downContent = `本月${pay_store_num_month}个`
      this.mapRightData[3].count = return_store_num;
      this.mapRightData[3].downContent = `本月${return_store_num_rate.toFixed(2)}%`
    },
    // 地图数据处理
    initMapData(data){
      let geoCoordMap = {}
      let hoverData = []
      data.forEach((item,index)=>{
        let name = this.initProvince(item.province)
        geoCoordMap[name] = [item.ip.lng,item.ip.lat];
        if(index<3){
          hoverData.push({
          name:name,
          num:item.count,
          id:index,
          value:item.count
          })
        }
      })
      this.geoCoordMap = geoCoordMap;
      this.hoverData = hoverData;
      let mapData = [];
      data.forEach(item=>{
        mapData.push({
          name:this.initProvince(item.province),
          value:item.count,
          rate:item.rate,
          ip:item.ip
        })
      })
      this.mapData = mapData;
    },
		lookAllOrder(){
		  this.layerIndex =	this.$layer.iframe({
				content: {
					content: orderTable, //传递的组件对象
					parent: this,//当前的vue对象
					data: {}//props
				},
				area:['70%','60%'],
				title: '本月所有订单',
				maxmin: true,
				cancel:() => {
					
				}
			})
		},
		lookAllBrowse(){
		  this.layerIndex2 = this.$layer.iframe({
				content: {
					content: recordTable, //传递的组件对象
					parent: this,//当前的vue对象
					data: {}//props
				},
				area:['70%','60%'],
				title: '实时浏览记录',
				maxmin: true,
				cancel:() => {
					
				}
			})
    },
    // 计算整点进行请求数据
    initTime(){
      let time = 60 - new Date().getSeconds(); //获取距离整分时剩的秒数
      const timer =setTimeout(()=>{
        time = 60
        let minutes = new Date().getMinutes();
        if(minutes == 0){
          this.initData();
        }
        // 每一分钟执行一次
        const timer2 = setInterval(()=>{
          let minutes = new Date().getMinutes();
          if(minutes == 0){
            this.initData();
          }
        },time * 1000)
        // 页面销毁清除每分钟的定时器
        this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer2);
        })
        // 清除第一个定时器
        clearTimeout(timer);
      },time * 1000)
      // 以防快速刷新时没清除定时器
      this.$once('hook:beforeDestroy',()=>{
        clearTimeout(timer)
      })
    },
    // 清除数据
    initData(){
      this.orderList = [];
      this.browseList = [];
      this.mapNationwideData = [];
      this.mapMonthData = [];
      this.onLineData.series = [];
      this.status = 1;
      this.$layer.close(this.layerIndex)
      this.$layer.close(this.layerIndex2)
      this.getMapDataTop();
    },
    initProvince(province){
      let name;
      if(province.indexOf('省') != -1){
        name = province.split('省').join("")
      }else if(province.indexOf('市') != -1){
        name = province.split('市').join("")
      }else if(province === '宁夏回族自治区'){
        name = '宁夏'
      }else if(province === '新疆维吾尔自治区'){
        name = '新疆'
      }else if(province === '内蒙古自治区'){
        name = '内蒙古'
      }else if(province === '广西壮族自治区'){
        name = '广西'
      }else if(province === '香港特别行政区'){
        name = '香港'
      }else if(province === '澳门特别行政区'){
        name = '澳门'
      }
      return name;
    }
  },
  mounted() {
    this.getMapDataTop();
    this.initTime();
  }
};
</script>

<style lang="scss" scoped>
.map-data {
  .main {
    .chart-box {
      position: relative;
      height: 100%;
      padding: 10px;
      border-radius: 5px;
    }
    .chart-box-border {
      border: solid 1px rgba(0, 255, 255, 0.3);
      box-shadow: 0 0 15px rgba(0, 252, 252, 0.3) inset;
    }
    .map-data-top {
      position: absolute;
      left: 25px;
      right: 25px;
      top: 25px;
      height: calc(60% - 25px);
      .chart-box-border {
        margin-top: 20px;
        height: calc(100% - 52px);
      }
      .clearfix {
        height: 100%;
      }
      .el-col {
        height: 100%;
      }
      .chart-box {
        &::before,
        &::after {
          content: " ";
          position: absolute;
          top: 0;
          left: 50%;
          width: 199px;
          height: 2px;
          transform: translateX(-50%);
          background: url("../../../assets/data-images/tabs-light.png");
        }
        &::after {
          top: initial;
          bottom: 0;
        }
      }
      .map-tabs {
        margin: 0 auto;
        display: flex;
        width: 240px;
        a {
          display: inline-block;
          width: 120px;
          height: 32px;
          text-align: center;
          line-height: 32px;
          color: #57d9d9;
          font-size: 14px;
          font-family: MicrosoftYaHei-Bold;
          border: 1px solid #2d5b8e;
          background-color: #0d3663;
        }
        .activate {
          background-image: linear-gradient(to right, #00f1f3, #0f203d);
          color: #fff;
        }
      }
      .main {
        height: calc(100% - 32px);
        display: flex;
        .main-left,
        .main-right {
          width: 15%;
          height: 100%;
          .item {
            height: calc(100% / 4);
            text-align: center;
            .item-title {
              position: relative;
              color: #27bfe8;
              padding-bottom: 4px;
              opacity: 0.8;
              &::before {
                content: " ";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background: linear-gradient(
                  to right,
                  #0a184c,
                  #3f8bd8 52%,
                  #0a184c 100%
                );
              }
            }
            .item-count {
              position: relative;
              font-size: 24px;
              line-height: 36px;
              color: #00fbfc;
              font-family: MicrosoftYaHei-Bold;
              em {
                font-size: 14px;
                color: #27bfe8;
                opacity: 0.8;
              }
              &::before {
                content: " ";
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background: linear-gradient(
                  to right,
                  #0a184c,
                  #3f8bd8 52%,
                  #0a184c 100%
                );
              }
            }
            .item-down {
              line-height: 24px;
              color: #fff;
              opacity: 0.8;
            }
          }
        }
        .map {
          flex: 1;
          height: 100%;
        }
      }
    }
    .map-data-bottom {
      position: absolute;
      left: 25px;
      right: 25px;
      bottom: 25px;
      height: calc(40% - 50px);
      margin-top: 25px;
      .el-row,
      .el-col {
        position: relative;
        height: 100%;
      }
    }
  }
}
</style>